<template>
	<view class="category">
		<!-- 顶部搜索部分 -->
		<searchLink></searchLink>
		<!-- 左右两侧部分 -->
		<view class="content" v-if="categories[activeIndex]">
			<view class="left">
				<view class="cate1" :class="{active:activeIndex===index}" v-for="(cate1, index) in categories" :key="index" @click="selectCate1(index)">{{cate1.cat_name}}</view>
			</view>
			<view class="right">
				<image src="/static/images/titleImage.png" mode=""></image>
				<!-- 二级分类 -->
				<view class="cate2" v-for="(cate2,index) in categories[activeIndex].children" :key="index">
					<view class="title">
						/
						<text>{{cate2.cat_name}}</text>
						/
					</view>
					<!--三级分类  -->
					<view class="cate3-wrapper">
						<view class="cate3" v-for="(cate3,subindex) in cate2.children" :key="subindex" @click="toSearchList(cate3.cat_name)">
							<image :src="cate3.cat_icon" mode=""></image>
							<text>{{cate3.cat_name}}</text>
						</view>

					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import searchLink from '@/components/searchLink.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	export default {
		components: {
			uniSearchBar,
			uniGrid,
			uniGridItem,
			searchLink
		},
		data() {
			return {
				// 一级分类选中的下标
				activeIndex: 0,
				//获取的左侧分类数据
				categories: []
			}
		},
		onLoad() {
			this.getCategories()
		},
		methods: {
			// 1、选择一级分类
			selectCate1(index) {
				this.activeIndex = index
			},
			// 2、  获取左侧	调用公共方法
			async getCategories() {
				this.categories = await this.$request({
					url: '/api/public/v1/categories'
				})
				console.log(this.categories)
		},
			// 3、 设置点击跳转至搜索列表
			 toSearchList(catName){
				 // console.log(catName)
				uni.navigateTo({
					url:'/pages/search_list/search_list?catName=' + catName
				})
			},
	},
	}
</script>
<style lang="less" scoped>
	.category {
		box-sizing: border-box;

		/* // 搜索框部分 */
		.search {
			box-sizing: border-box;
			height: 100rpx;
			background-color: #eb4450;
			padding: 20rpx 16rpx;

			.inner {
				background-color: #fff;
				border-radius: 4rpx;
				height: 60rpx;
				color: #bbb;
				display: flex;
				align-items: center;
				justify-content: center;

				icon {
					margin: 6rpx 16rpx 0 0;
				}
			}
		}

		.content {
			display: flex;
			position: absolute;
			left: 0;
			right: 0;
			top: 100rpx;
			bottom: 0;

			.left {
				width: 198rpx;
				overflow: scroll;

				.cate1 {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					background-color: #f4f4f4;
					color: #333;
					font-size: 30rpx;
					border-bottom: 1rpx solid #eee;
					box-sizing: border-box;

					&.active {
						background-color: #fff;
						color: #eb4450;
						position: relative;

						&::before {
							position: absolute;
							content: '';
							width: 8rpx;
							height: 60rpx;
							background-color: #eb4450;
							left: 0;
							top: 20rpx;
						}
					}
				}
			}

			.right {
				flex: 1;
				// background-color: pink;
				padding: 20rpx 16rpx 0;
				overflow: scroll;

				>image {
					width: 520rpx;
					height: 180rpx;
				}

				.cate2 {
					.title {
						color: #e0e0e0;
						height: 110rpx;
						text-align: center;
						line-height: 110rpx;

						text {
							color: #333;
							font-size: 30rpx;
							margin: 0 30rpx;
						}
					}

					.cate3-wrapper {
						display: flex;
						flex-wrap: wrap;

						.cate3 {
							display: flex;
							flex: 33.33%;
							flex-direction: column;
							align-items: center;

							>image {
								width: 120rpx;
								height: 120rpx;
							}

							>text {
								color: #333;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
